<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="24" v-show="showSupplier">
                <el-card class="box-card">
                    <transition name="fade-transform" mode="out-in">
                        <vxe-grid v-show="!showCreate" id="xGrid" :loading="loading" ref="xGrid" border resizable
                            show-overflow keep-source highlight-hover-row :height="tableH - 50" align="center"
                            :print-config="{}" :import-config="{}" :export-config="{}"
                            :custom-config="{ storage: true }" :toolbar-config="tableToolbar" :columns="tableColumn"
                            :seq-config="{
                                startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
                            }" :pager-config="tablePage" :data="tableData" @page-change="handlePageChange" @cell-click="showEquip">
                            <template #supplierName="{ row }">
                                <div class="tableTxt tableTxtHoverBlue" @click="showSupplierInfo(row)">

                                    <div class="textHidden1">{{ row.supplierName }}</div>
                                </div>
                            </template>
                            <template v-slot:toolbar_buttons>

                                <div class="tableToolbar">
                                    <div style="min-width:110px" class="tableToolbarText ">厂商名称/编号：</div>
                                    <el-input v-model="searchName" size="small"
                                        style="margin-inline-start:8px;width:50%;" :placeholder="placeholder" clearable
                                        @clear="getData(0)" @change="getData(0)" />
                                    <vxe-button style="min-width:55px;margin-left:8px" status="primary" size="small"
                                        class="tableToolbarTextL" @click="getData(0)">搜索</vxe-button>
                                    <vxe-button style="min-width: 55px; margin-left: 8px" status="primary" v-if="isShow"
                                        class="tableToolbarTextL" size="small" @click="create">新增</vxe-button>
                                    <el-tooltip class="item" effect="dark" :content="TopLeft" placement="top-start">
                                        <el-upload class="upload-demo" style="display:inline" ref="UpLoad"
                                            action="uploadUrl" :show-file-list="false" :auto-upload="false"
                                            :http-request="supUpload" :on-change="selectFile" accept=".xlsx,.xls">
                                            <el-button style="margin-left:8px" v-if="isShow" size="small"
                                                type="success">导入厂商</el-button>
                                        </el-upload>
                                    </el-tooltip>
                                </div>
                            </template>
                            <template #operate="{ row }">
                                <el-link type="primary" class="elLinkBTN" :disabled="!isShow"
                                    @click="edit(row)">编辑</el-link>
                                <el-link type="primary" class="elLinkBTN" @click="showContact(row)">联系人信息</el-link>
                                <el-link type="primary" class="elLinkBTN" @click="showContact2(row)">资质信息</el-link>
                                <el-link type="danger" class="elLinkBTN" :disabled="!isShow"
                                    @click="deleteDe(row)">删除</el-link>
                            </template>
                            <template v-slot:current_pageNum>
                                <!-- <span class="vxe-pager--total">当前页 {{ tableData.length }} 条</span> -->
                            </template>
                        </vxe-grid>
                    </transition>
                    <vxe-modal v-model="createdInf" :loading="formLoading" :title="formTitle" width="1000" resize
                        destroy-on-close>
                        <template v-slot>
                            <vxe-form ref="myform" :data="formInfo" :items="formItems" :rules="formRules">
                            </vxe-form>
                            <div class="modal_footer">
                                <vxe-button content="取 消" @click="createdClose" />
                                <vxe-button status="primary" content="保存" @click="save" />
                            </div>
                        </template>
                    </vxe-modal>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="showContacts">
                <el-card class="box-card">
                    <div>
                        <el-page-header @back="goBackSupplier" />
                        <contactselect ref="contactselect" :tableH="tableH - 100" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="showContacts2">
              <el-card class="box-card">
                  <div>
                      <el-page-header @back="goBackSupplier" />
                      <contactselect2 ref="contactselect2" :tableH="tableH - 100" />
                  </div>
              </el-card>
          </el-col>
            <el-col :span="24" v-show="showEquipments">
                <el-card class="box-card">
                    <div>
                        <el-page-header @back="goBackSupplier" style="margin-bottom:10px">
                            <div slot="content" style="font-weight:800">
                                厂商名称:{{ currSupName }}
                            </div>
                        </el-page-header>
                        <el-tabs v-model="activeName" type="border-card">
                            <el-tab-pane label="器材信息" name="matInfo">
                                <vxe-grid id="xGridMat" :loading="loading1" ref="xGridMat" border resizable
                                    show-overflow keep-source highlight-hover-row :height="tableH - 150" align="center"
                                    :print-config="{}" :import-config="{}" :export-config="{}"
                                    :custom-config="{ storage: true }" :columns="tableColumn1" :seq-config="{
                                        startIndex: (tablePage1.currentPage - 1) * tablePage1.pageSize,
                                    }" :pager-config="tablePage1" :data="tableMatData" @page-change="handlePageChange1">
                                    <template v-slot:current_pageNum>
                                        <span class="vxe-pager--total">当前页 {{ tableMatData.length }} 条</span>
                                    </template>
                                </vxe-grid>
                            </el-tab-pane>
                            <el-tab-pane label="设备信息" name="equipmentInfo">
                                <vxe-grid id="xGridEquip" :loading="loading2" ref="xGridEquip" border resizable
                                    show-overflow keep-source highlight-hover-row :height="tableH - 150" align="center"
                                    :print-config="{}" :import-config="{}" :export-config="{}"
                                    :custom-config="{ storage: true }" :columns="tableColumn2" :seq-config="{
                                        startIndex: (tablePage2.currentPage - 1) * tablePage2.pageSize,
                                    }" :pager-config="tablePage2" :data="tableEquipData" @page-change="handlePageChange2">
                                    <template v-slot:current_pageNum>
                                        <span class="vxe-pager--total">当前页 {{ tableEquipData.length }} 条</span>
                                    </template>
                                </vxe-grid>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import contactselect from "./component/contactselect.vue";
import contactselect2 from "./component/contactselect2.vue";
export default {
    components: {
        contactselect,
        contactselect2,
    },
    directives: {

    },
    data() {
        return {
            isShow: true,
            loading: false,
            loadingEquip: false,
            selEquips: [],
            tableH: window.innerHeight - 100,
            showSupplier: true,
            showContacts: false,
            showContacts2: false,
            tableColumn: [
                { type: "seq", title: "序号", width: 100, fixed: "left" },
                { field: "supplierName", minWidth: 200, title: "厂商名称", fixed: 'left', slots: { default: 'supplierName' } },
                { field: "supplierCode", minWidth: 120, title: "编号", fixed: 'left', },
                { field: "supplierDesc", minWidth: 160, title: "状态" },
                { field: "supplierAddress", minWidth: 120, title: "地址" },
                { field: "supplierTel", minWidth: 120, title: "联系方式" },
                { field: "suuplierFax", minWidth: 120, title: "传真" },
                { field: "accountName", minWidth: 120, title: "账户名称" },
                { field: "accountsBank", minWidth: 160, title: "开户行" },
                { field: "accountsNum", minWidth: 220, title: "账号" },
                { field: "taxNum", minWidth: 200, title: "税号" },
                { field: "remark", minWidth: 120, title: "备注" },
                {
                    title: "操作",
                    fixed: "right",
                    width: 240,
                    slots: { default: "operate" },
                },
            ],
            tableToolbar: {
                refresh: {
                    query: () => this.getData(),
                },
                import: false,
                export: false,
                print: false,
                custom: true,
                slots: {
                    buttons: "toolbar_buttons",
                },
            },
            tableData: [],
            tablePage: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                align: "right",
                pageSizes: [50, 80],
                layouts: [
                    "Sizes",
                    "PrevJump",
                    "PrevPage",
                    "JumpNumber",
                    "NextPage",
                    "NextJump",
                    "FullJump",
                    "Total",
                ],
                perfect: true,
                slots: {
                    right: 'current_pageNum'
                }
            },
            showCreate: false,
            formLoading: false,
            formTitle: "",
            formInfo: {},
            formItems: [
                {
                    field: "supplierName",
                    title: "厂商名称",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "厂商名称" } },
                },
                {
                    field: "supplierCode",
                    title: "编号",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "厂商编号" } },
                },
                {
                    field: "supplierDesc",
                    title: "说明",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "厂商说明" } },
                },
                {
                    field: "supplierAddress",
                    title: "地址",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "地址" } },
                },
                {
                    field: "supplierTel",
                    title: "联系方式",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "联系方式" } },
                },
                {
                    field: "suuplierFax",
                    title: "传真",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "传真" } },
                },
                {
                    field: "accountName",
                    title: "账户名称",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "账户名称" } },
                },
                {
                    field: "accountsBank",
                    title: "开户行",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "开户行" } },
                },
                {
                    field: "accountsNum",
                    title: "账号",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "账号" } },
                },
                {
                    field: "taxNum",
                    title: "税号",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "税号" } },
                },
                {
                    field: "remark",
                    title: "备注",
                    span: 24,
                    itemRender: { name: "$input", props: { placeholder: "备注" } },
                },
            ],
            formRules: {
                supplierName: [{ required: true, message: "请填写厂商名称" }],

            },

            tableColumnEquip: [
                { type: 'checkbox', title: '选择', width: 50, fixed: "left" },
                //{ field: 'equipCode', title: '设备编号' },
                { field: 'equipName', title: '设备名称', align: "left" },
                { title: '操作', fixed: "right", width: 60, slots: { default: 'operequip' } },
            ],
            tableToolbarEquip: {
                slots: {
                    buttons: "etoolbar_buttons",
                },
            },
            formEquipItems: [
                { title: '设备名称', span: 24, slots: { default: 'equipment' } },
            ],
            formEquipRules: {
                supProdID: [{ required: true, message: '设备不能为空' }],
            },

            tableDataEquip: [],
            equipFormTitle: "",
            equipFormInfo: {},
            showEquipCreate: false,
            equipName: "",
            supplierRow: [],
            showEquipDialog: true,
            equipList: [],
            equipInfo: "",
            equipDetailInfo: {},
            cardBodyH: window.innerHeight - 80,
            showEp: false,
            equipTreeRes: [],
            createdInf: false,
            searchName: null,
            placeholder: '请输入厂商名称/编号查询',
            uploadUrl: '',
            TopLeft: 'Excel文件列头按照表格内即可(其中“厂商名称”必填)',
            loadingFullScreen: null,
            showEquipments: false,
            currSupId: 0,
            currSupName: null,

            tableMatData: [],
            loading1: false,
            tableColumn1: [
                { type: "seq", title: "序号", width: 100, fixed: "left" },
                { field: "matName", minWidth: 120, title: "器材名称", fixed: 'left' },
                { field: "matCode", minWidth: 120, title: "编号", fixed: 'left', },
                { field: "matModel", minWidth: 120, title: "类型" },
                { field: "matSpec", minWidth: 120, title: "规格" },
                { field: 'bmgid', minWidth: 120, title: '检查类型', formatter: ({ row }) => { return this.format(this.gradeArr, row.bmgid) } },
            ],
            tablePage1: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                align: "right",
                pageSizes: [50, 80],
                layouts: [
                    "Sizes",
                    "PrevJump",
                    "PrevPage",
                    "JumpNumber",
                    "NextPage",
                    "NextJump",
                    "FullJump",
                    "Total",
                ],
                perfect: true,
                slots: {
                    right: 'current_pageNum'
                }
            },
            gradeArr: [],
            profsArr: [],
            activeName: "matInfo",

            tableEquipData: [],
            loading2: false,

            tableColumn2: [
                { type: "seq", title: "序号", width: 100, fixed: "left" },
                { field: "equipName", minWidth: 120, title: "设备名称", fixed: 'left' },
                { field: "equipCode", minWidth: 120, title: "编号" },
                { field: "equipModel", minWidth: 120, title: "类型" },
                { field: "equipSpec", minWidth: 120, title: "规格" },
                { field: 'profID', minWidth: 100, title: '专业', formatter: ({ row }) => { return this.format(this.profsArr, row.profID) } },

            ],
            tablePage2: {
                total: 0,
                currentPage: 1,
                pageSize: 50,
                align: "right",
                pageSizes: [50, 80],
                layouts: [
                    "Sizes",
                    "PrevJump",
                    "PrevPage",
                    "JumpNumber",
                    "NextPage",
                    "NextJump",
                    "FullJump",
                    "Total",
                ],
                perfect: true,
                slots: {
                    right: 'current_pageNum'
                }
            },
        };
    },
    mounted() {
        this.getData();
        this.getGradeData();
        this.getProfs();
        var _this = this;
        window.onresize = () => {
            return (() => {
                _this.tableH = window.innerHeight - 80;
                _this.cardBodyH = window.innerHeight - 80;
            })();
        };
        //document.addEventListener('visibilitychange', this.visibilityChange);
    },
    beforeDestroy() {
        window.onresize = null;
        //document.removeEventListener('visibilitychange', this.visibilityChange);
    },
    methods: {
        visibilityChange() {
            if (document.visibilityState == 'visible') {
                this.getData();
            }
        },
        getData(type) {
            if (type === 0) {
                this.tablePage.currentPage = 1;
            }
            this.loading = true;
            this.tableData = [
                { "supplierName": "tset1", "supplierCode": "001", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "南京", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset2", "supplierCode": "002", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "北京", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset3", "supplierCode": "003", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "已注销", "supplierAddress": "舟山", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset4", "supplierCode": "004", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "暂停", "supplierAddress": "湛江", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset5", "supplierCode": "005", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "上海", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset6", "supplierCode": "006", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "江苏", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset7", "supplierCode": "007", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "山东", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset8", "supplierCode": "008", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "正常", "supplierAddress": "广东", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },
                { "supplierName": "tset9", "supplierCode": "009", "accountsBank": "中国工商银行", "accountName": '', "accountsNum": "6124545451***1231", "taxNum": '', "supplierDesc": "已注销", "supplierAddress": "海南", "supplierTel": "17839391212", "suuplierFax": '', "remark": "" },

            ];
            this.tablePage.total = this.tableData.length
            var that = this;
            setTimeout(function () {
                that.loading = false;
            }, 500);
        },
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.currentPage = currentPage;
            this.tablePage.pageSize = pageSize;
            this.getData(0);
        },
        handlePageChange1({ currentPage, pageSize }) {
            this.tablePage1.currentPage = currentPage;
            this.tablePage1.pageSize = pageSize;
            this.getCurrentSupplierMat(this.currSupId);
        },
        handlePageChange2({ currentPage, pageSize }) {
            console.log(currentPage)
            this.tablePage1.currentPage = currentPage;
            this.tablePage1.pageSize = pageSize;
            this.getCurrentSupplierEquip(this.currSupId);
        },
        create() {
            this.formTitle = "添加厂商";
            this.formInfo = {
                supplierName: "",
                supplierCode: "",
                supplierDesc: "",
                supplierAddress: "",
                supplierTel: "",
                suuplierFax: "",
                accountName: "",
                accountsBank: "",
                accountsNum: "",
                taxNum: "",
                remark: ''
            };
            this.createdInf = true;
        },
        edit(row) {
            this.createdInf = true;
            this.formTitle = "编辑厂商信息";
            this.formLoading = true;
            var that = this;
            this.formInfo = row
            setTimeout(function () {
                that.formLoading = false;
            }, 500);
        },
        deleteDe(row) {
            this.$confirm(`是否删除 ${row.supplierName} 的信息`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.loading = true;
                    var that = this;
                    setTimeout(function () {
                        that.loading = false;
                        that.$message({ type: "success", message: "删除成功!" });
                    }, 500);

                })
                .catch(() => { });
        },
        save() {
            this.$refs.myform
                .validate()
                .then((suc) => {
                    if (!suc) {
                        this.formLoading = true;
                        var that = this;
                        setTimeout(function () {
                            that.loading = false;
                            that.$message({ type: "success", message: "保存成功!" });
                            that.createdInf = false;
                        }, 500);
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        showContact(row) {
            //将supplierId传过去
            this.showSupplier = false;
            this.showContacts = true;
            this.$refs.contactselect.currSupplierId = row.supplierID;
            this.$refs.contactselect.getData();
            this.$refs.contactselect.selectDetails = true;
        },
        showContact2(row) {
            //将supplierId传过去
            this.showSupplier = false;
            this.showContacts2 = true;
            this.$refs.contactselect2.currSupplierId = row.supplierID;
            this.$refs.contactselect2.getData();
            this.$refs.contactselect2.selectDetails = true;
        },

        async showEquip({ row }) {
            this.equipInfo = row.supplierName;
            this.supplierRow = [];
            this.supplierRow.push(row); //打开设备列表，并传supperID
            this.selEquips = [];
            await this.getEquipData({ supplierID: row.supplierID });
        },
        goBackSupplier() {
            this.showEquipments = false;
            this.showSupplier = true;
            this.showContacts = false;
            this.showContacts2 = false;
            this.getData(0);
        },
       
        //设备列表操作函数
        getEquipData(params) {
            this.loadingEquip = true;
            var that = this;
            setTimeout(function () {
                that.tableDataEquip = [];
                that.loadingEquip = false;
            }, 500);
        },
        createEquip() {
            this.equipFormTitle = "添加设备";
            this.equipName = " ";
            this.equipFormInfo = {
                supplierID: this.supplierRow[0].supplierID,
                equipList: []
            };
            this.showEquipCreate = true;
        },
        createdClose() {
            this.createdInf = false;
            this.$refs.myform.reset();
        },
        checkboxChange({ checked, row }) {
            var has = this.selEquips.findIndex(e => e.beid === row.beid);
            if (checked && has === -1) {
                this.selEquips.push(row);
            } else if (!checked && has > -1) {
                this.selEquips.splice(has, 1);
            };
        },
        checkboxAll() {

        },
        getGradeData() {
            this.gradeArr = [];


        },
        getProfs() {
            this.profsArr = [];
        },
        async showSupplierInfo(data) {
            this.showEquipments = true;
            this.showContacts = false;
            this.showSupplier = false;
            this.activeName = "matInfo";
            this.currSupId = data.supplierID;
            this.currSupName = data.supplierName;

            //获取supperid下的设备
            await this.getCurrentSupplierMat(this.currSupId);

            //获取supperid下的器材
            await this.getCurrentSupplierEquip(this.currSupId);

        },
        getCurrentSupplierMat(id) {
            this.loading1 = true;
            var that = this;
            setTimeout(function () {
                that.tableMatData = [];
                that.loading1 = false;
            }, 500);
        },
        getCurrentSupplierEquip(id) {
            this.loading2 = true;
            var that = this;
            setTimeout(function () {
                that.tableEquipData = [];
                that.loading2 = false;
            }, 500);
        },
        async deleteDeEquip() {
            this.equipFormInfo.equipList = [];
            this.selEquips.map(item => {
                this.equipFormInfo.equipList.push(item.beid); //设备主键集合
            });
            this.equipFormInfo.supplierID = this.supplierRow[0].supplierID;
            if (this.equipFormInfo.equipList.length === 0) {
                this.$message({ type: 'warning', message: '请先勾选需要移除的设备!' });
                return;
            };
            this.loadingEquip = true;
            var that = this;
            setTimeout(function () {
                that.tableEquipData = [];
                that.selEquips = [];
                that.loadingEquip = false;
                that.$message({ type: 'success', message: '移除成功!' });
            }, 500);
            await this.getEquipData({ supplierID: this.equipFormInfo.supplierID });
        },
        //将所选的设备保存至数据库
        async saveEquip() {
            this.$message({ type: 'success', message: '新增成功!' });
            this.equipTreeRes = [];
            await this.getEquipData({ supplierID: this.equipFormInfo.supplierID });
        },
        openSelectEquip(data) {
            this.$refs.equipselect.show(0);
        },
        selectedEquips(data) {
            this.equipTreeRes = JSON.parse(JSON.stringify(data));
            let resList = JSON.parse(JSON.stringify(data));
            let arr = [];
            console.log(resList);
            resList.map(item => {
                this.equipName += " " + item.equipName + "  ;";
                arr.push(item.beid);//设备主键集合
            });
            this.equipFormInfo.equipList = JSON.parse(JSON.stringify(arr));
            this.$refs.equipForm.validate();
        },
        delEquipment(i) {
            this.$confirm(`是否删除此设备`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.equipTreeRes.splice(i, 1);
                this.$forceUpdate();
            }).catch(() => { });
        },
        close() {
            this.equipTreeRes = [];
        },
        goEquipBack() {
            this.showEquipCreate = false;
            this.equipTreeRes = [];
            this.getEquipData({ supplierID: this.equipFormInfo.supplierID });
        },
        showDetails(row) {
            this.showEp = true;
            this.equipDetailInfo = {
                equipName: row.equipName,
                equipCode: row.equipCode,
                equipSpec: row.equipSpec,
                equipModel: row.equipModel
            }
        },
        selectFile(file, fileList) {
            var format = file.name.replace(/.+\./, "");  //获取文件后缀名
            if (format === 'xls' || format === 'xlsx') {  //限制导入文件格式
                this.$refs.UpLoad.submit(); // 调用手动上传方法
            } else {
                this.$message({ type: 'warning', message: '请导入excel表格类型文件' });
                this.$refs.UpLoad.clearFiles();
            }
        },
        supUpload(row) {
            this.loadingFullScreen = this.$loading({
                lock: true,
                text: '正在导入厂商列表',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            var that = this;
            setTimeout(function () {
                that.loadingFullScreen.close();
                that.$message({ type: 'success', message: '厂商导入成功' });
            }, 500);
        },
        format(ops, op, hasops) {
            var val = null;
            if (hasops) {
                var options = ops
                    .map((e) => {
                        return e.options;
                    })
                    .flat()
                    .valueOf();
                val = options.find((e) => e.value === op);
            } else {
                val = ops.find((e) => e.value === op);
            }
            return val ? val.label : "";
        },
        toDate(date) {
            return date ? moment(date).format("YYYY-MM-DD HH:mm:ss") : "";
        },
        },
        template: "#template"
};
</script>
<style>
.tableTxt {
    width: calc(100% + 1px);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tableTxt div {
    width: 0px;
    flex: 1;
    font-weight: 700;
}

.tableTxt i {
    font-size: 28px;
    margin-right: 8px;
}

.tableTxt svg {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.tableTxtHoverBlue:hover div {
    color: #2c7ef8;
}

.elscrollbar {
    overflow-x: hidden;

}

.tableToolbarText {
    font-weight: 600;
    font-size: 14px;
}

.tableToolbarTextL {
    margin-left: 8px;
}

.elLinkBTN {
    margin: 0 4px;
}

.tableToolbar {
    display: flex;
    align-items: center;
}

.textHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal_footer {
    width: 100%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
}
</style>